<template>
  <div>
    <div class="panel-body-1">
      <h5 class="text1">
          <i class="fa fa-bar-chart"></i> 试卷类型预置
      </h5>
      <p class="text2">
         预置与管理您需要的试卷类型！
      </p>
    </div>
     <!-- <keep-alive>
          <router-view v-if="this.$route.meta.keepAlive"></router-view>
          </keep-alive>  -->
    <div class="panel-body-2">
      <div class="head">
            <div class="btn">
              <el-button type="primary" plain size="small" @click.native = reload1>创建</el-button>
            </div>
            <div class="text3">
                <i class="fa fa-th fa-fw"></i>预置类型
            </div>
            <div class="text4">创建预置类型</div>
      </div>
      <!-- 页面主要内容 -->
      <div class="form-1">
       <el-table
          :data="List"
          highlight-current-row
          style="width: 100%" class="table"
          :default-sort = "{prop: 'num', order: 'descending'}"
          id='table_content'
          ref="tableRef">
          <el-table-column
            prop="name"
            label="类型名称"
            width="340">
          </el-table-column>
          <el-table-column
            prop="student.student"
            label="适用对象"
            width="100">
          </el-table-column>
          <el-table-column
            prop="scores"
            label="分值"
            sortable
            width="100">
          </el-table-column>
          <el-table-column
            prop="questionTypes"
            label="备注">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="small"
                type="success"
                plain
                @click="view(scope.row.id)">查看</el-button>
                <el-button
                type="warning" 
                size="small" 
                plain
                @click = reload2>编辑</el-button>
                <el-button
                type="danger" 
                size="small" 
                plain
                @click = reload3(scope.row.id)>删除</el-button>
            </template>
          </el-table-column>
       </el-table>
      </div>
       <el-pagination
          background
          :pager-count="5"
          layout="prev, pager, next"
          :total="50"
          class="page">
       </el-pagination> 
    </div>
  </div>
</template>

<script>
// 此处引入普通JS文件
import {test} from "../../static/test.js"
import { Script } from 'vm';
import {getRequest} from "../utils/api"
import { postRequest } from "../utils/api";

export default {
  name: 'PreBase',
  components: {},
  inject: ['reload'],
  mounted() {
    // 渲染列表的接口
     getRequest('/pre_base/get_own_pre_bases?owner_id=1').then(res => {
       // 打印返回的数据
      console.log(res)
      // 判断返回是否成功
      if(res.status !== 200) {
        this.$message.error('获取列表数据失败！')
      }
      // 获取返回的数据
      // this.List = res.data.data.list
     })
      .catch(err => {
          console.log(err);
        });
      
            },
  data() {
    return {
        List: []
    }
  },
   methods: {
      formatter(row, column) {
        return row.address;
      },
      // 创建按钮
      reload1() {
        this.$router.replace('/new_pre_base')
      },
      // 编辑按钮
      reload2() {
        this.$router.replace('/update_pre_base')
      },
      // 根据id删除列表预置信息
      async reload3(id) {
        // 弹框询问用户是否确认删除列表数据
         const res = await this.$confirm('此操作将永久删除该预置类型, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => err)
        if(res == 'cancel') {
          return this.$message.info('您已取消删除该预置类型')
        }
        getRequest('/pre_base/delete_pre_base?pre_base_id='+id).then(resp => {
         if(resp.status == 200) {
           this.$message.success('删除预置类型成功！')
           this.reload()
         }else{this.$message.error('删除预置类型失败')}
     })
      },
      // 查看按钮
      view(id) {
        this.$router.push({
        path: "/view_pre_base",
        name: "查看预置类型",
        params: { id:id }
      })
      }
  }
}
</script>

<style scoped>

.panel-body-1 {
margin:20px 0;
background-color: white;
border: 1px solid transparent;
border-radius: 3px;
padding: 15px 0 15px 15px;
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.125);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.125);
text-align: left;
}

.panel-body-2 {
margin-bottom: 20px;
background-color: white;
border: 1px solid transparent;
border-radius: 3px;
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.125);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.125);
text-align: left;
}

.head {
  border-bottom: 1px solid #eeeeee;
  padding: 15px 0 15px 15px;
}

.text1 {
  font-size: 14px;
  font-weight: 400;
  color: black;
  margin: 0 0 0 0;
}

.text2 {
  font-size: 10px;
  color: #777777;
  margin: 0 0 0 0;
}

.text3 {
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 0 0;
}

.text4 {
  font-size: 10px;
  margin: 0 0 0 0;
  color:#777777;
}

.btn {
  float: right;
  margin-right: 15px;
}

.table {
  padding: 0 10px 0 10px;
}

.page {
  margin-top: 20px;
  float: right;
}

.form-1 {
  margin-bottom: 20px;
}
</style>

